<template>
  <div class="content_box">
    <div class="msg_box">
      <div class="box">
        <p class="title">姓名</p>
        <p class="price">
          <input v-model.trim="formData.contacts" type="text" placeholder="请输入姓名">
        </p>
      </div>
      <div class="box">
        <p class="title">登录账号</p>
        <p class="price">
          <input v-model.trim="formData.loginName" type="text" placeholder="请输入登录账号">
        </p>
      </div>
      <div class="box">
        <p class="title">登录密码</p>
        <p class="price">
          <input v-model.trim="formData.password" type="text" placeholder="请输入登录密码">
        </p>
      </div>
      <div class="box">
        <p class="title">手机号</p>
        <p class="price">
          <input v-model.trim="formData.mobile" type="text" placeholder="请输入手机号">
        </p>
      </div>
    </div>
    <div class="anniu_box">
      <van-button 
        @click="submit"
        :disabled="loading"
        :loading="loading" 
        :loading-text="formData.id?'修改中...':'添加中...'"
        type="primary"
        color="#3d98f7"
        custom-style="box-shadow: 0rpx 10rpx 20rpx #CEDBFA;border:none;width: 100%;height: 88rpx;line-height: 88rpx;background: #1E68FF;border-radius: 100rpx;text-align: center;color: #fff;font-size: 30rpx;"
      >{{formData.id?'立即修改':'立即添加'}}</van-button>
    </div>
  </div>
</template>
 
<script>
import {
  addDsStoreUser
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      formData:{
        storeId:'',
        contacts:'',
        loginName:'',
        password:'',
        mobile:''
      },
      loading:false
    };
  },
  onShow() {
    this.loading = false
    this.formData.contacts = ''
    this.formData.loginName = ''
    this.formData.password = ''
    this.formData.mobile = ''
  },

  methods: {
    
    // 添加账号
    submit(){
      let phoneReg = /(^1[3|4|6|5|7|8]\d{9}$)|(^09\d{8}$)/;
      if(!this.formData.contacts){
        this.$toast('请输入姓名') 
        return
      }
      if(!this.formData.loginName){
        this.$toast('请输入登录账号') 
        return
      }
      if(!this.formData.password){
        this.$toast('请输入登录密码') 
        return
      }
      if(!this.formData.mobile){
        this.$toast('请输入手机号') 
        return
      }
      if(!phoneReg.test(this.formData.mobile)){
        this.$toast('请填写正确的手机号') 
        return
      }
      this.loading = true
      this.$showLoading('添加中...')
      addDsStoreUser(this.formData).then(res=>{
        if(res.statusCode == '00000'){
          wx.hideLoading()
          wx.navigateBack({
            delta: 1, 
          })
          this.$toast('添加成功')
        }else{
          this.loading = false
          wx.hideLoading()
          this.$toast(res.message)
        }
      })
    }
  },
  onLoad(options) {
    console.log(options)
    this.formData.storeId = options.storeId
  },
  onHide() {},

  onUnload() {

  },
};
</script>

<style lang="scss" scoped>
.msg_box{
  margin:0 30rpx;
  .box{
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:28rpx;
    color:#222;
    border-bottom:1px solid #f5f5f5;
    .title{
      font-weight: 500;
      display: flex;
      align-items: center;
      span{
        display: inline-block;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        background: #1E68FF;
        border-radius: 50%;
        color:#fff;
        text-align: center;
        font-size:24rpx;
        margin-left:20rpx;
      }
    }
    .price{
      display: flex;
      align-items: center;
      input{
        text-align: right;
        margin-right:20rpx;
      }
    }
    .yj{
      display: flex;
      align-items: center;
      p{
        width: 140rpx;
        padding:8rpx 0;
        background: #F1F3F4;
        border-radius: 10rpx;
        font-size:28rpx;
        margin-right:30rpx;
        text-align: center;
      }
      .on{
        background: #1E68FF;
        color:#fff;
      }
      input{
        text-align: right;
        margin-right:20rpx;
        font-size:28rpx;
      }
      span{
        font-size:28rpx;
      }
    }
    .yy{
      display: flex;
      input{
        width: 140rpx;
        border:1px solid #dcdfe6;
        text-align: center;
        height: 60rpx;
        border-radius: 10rpx;;
        margin:0;
      }
      span{
        margin:0 20rpx;
      }
  
    }
  }
}
.photo{
  margin-bottom:30rpx;
  .title{
    font-size:28rpx;
    font-weight: 500;
    color:#252628;
    margin:30rpx 0; 
  }
  .box1{
    .nr{
      display: flex;
      flex-wrap:wrap;
    }
    .img{
      width: 140rpx;
      height: 140rpx;
      background: #F8F8F8;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction:column;
      margin-right:20rpx;
      img{
        width: 48rpx;
        height: 48rpx;
      }
      p{
        font-size:24rpx;
        color:#999DA0;
        margin-top:8rpx;
      }
    }
    .img_box{
      width: 140rpx;
      height: 140rpx;
      position: relative;
      margin-right:40rpx;
      img{
        width: 140rpx;
        height: 140rpx;
        border-radius: 20rpx;
      }
      p{
        position: absolute;
        top: -12rpx;
        right: -16rpx;
        width: 40rpx;
        height: 40rpx;
        background: #333;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#fff;
      }
    }
    .text_t{
      color:#999DA0;
      font-size:26rpx;
      margin-top:24rpx;
    }
  }
}
.anniu_box{
  margin:50rpx 30rpx;
}
</style>
